<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="item in talkAboutStore.talkList" :key="item.id">
        {{ item.content }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import axios from "axios";
import {nanoid} from "nanoid"
import {useTalkAboutStore} from "@/store/talkAbout.ts";
// let talkList:Array<Talk> = reactive([
//   {id: '1', content: '今天你有点怪，怪可爱的'},
//   {id: '2', content: '给你吃个草莓，今天你想我了没'},
//   {id: '3', content: '心里给你留了一块地，就是对你死心塌地'}
// ])
const talkAboutStore = useTalkAboutStore()

interface Talk {
  id: string
  content: string
}

async function getLoveTalk() {
  let result = await axios.get('https://api.uomg.com/api/rand.qinghua')
  let obj: Talk = {id: nanoid(), content: result.data.content}
  talkAboutStore.talkList.unshift(obj)
}
//放到本地
function putInStorage(){
  localStorage.setItem("talkList",JSON.stringify(talkAboutStore.talkList))
}
function getFromStorage(){
  //取出本地存储的talkList，并返回，如果没数据 就返回空数组 以免报错
 return  JSON.parse(localStorage.getItem("talkList") as string) || []
}

</script>


<style scoped>
.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>